<template>
  <div class="frame">
    <Breadcrumb class="bread-crumb">
      <BreadcrumbItem  :to="firstPath">{{firstName}}</BreadcrumbItem>
      <BreadcrumbItem v-if="secondPath!= ''" :to="secondPath">{{secondName}}</BreadcrumbItem>
      <BreadcrumbItem v-if="thirdPath!= ''" :to="thirdPath">{{thirdName}}</BreadcrumbItem>
      <BreadcrumbItem v-if="fourthPath!= ''" :to="fourthPath">{{fourthName}}</BreadcrumbItem>
    </Breadcrumb>
    <Content class="main-content-con">
      <slot></slot>
    </Content>
  </div>
</template>

<script>
  export default {
    name: "bread-crumb",
    props: {
      firstName: {
        type: String,
        default: "主页"
      },
      firstPath: {
        type: String,
        default: "/"
      },
      secondName: {
        type: String,
        default: ""
      },
      secondPath: {
        type: String,
        default: ""
      },
      thirdName: {
        type: String,
        default: ""
      },
      thirdPath: {
        type: String,
        default: ""
      },
      fourthName: {
        type: String,
        default: ""
      },
      fourthPath: {
        type: String,
        default: ""
      },
    }
  }
</script>

<style scoped>
  .main-content-con {
    margin: 15px 0 0 0px;
    padding: 15px 10px 0 10px;
    background: #fff;
    border-radius: 4px;
    -moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.0980392156862745);
    -webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.0980392156862745);
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.0980392156862745);
  }

  .frame{
    padding: 10px;
  }

</style>
